<template>
	<view class="content">
		<!-- tab导航 -->
		<view class="zt-topBar">
			<view v-for="(item,index) in topBars" :class="['zt-bar-item',currentSwiper === index ? 'zt-active' : '']" @click="clickItem(index)"
			 :key="index">
				{{ item }}
			</view>
		</view>

		<!-- 视图 -->
		<view>
			<swiper class="zt-swiper" :current="currentSwiper" @change="swiperChange" interval="200" :style="{'height':viewHeight+'px'}">
				<swiper-item>
					<scroll-view class="zt-scroll-view" scroll-y="true">
						<qiandao-renwu v-bind:signData="signData"></qiandao-renwu>
						<view style="width: 100%;height: 100rpx;opacity:0;">底部占位盒子</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view class="zt-scroll-view" scroll-y="true">
						<pai-hang></pai-hang>
						<view style="width: 100%;height: 100rpx;opacity:0;">底部占位盒子</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view class="zt-scroll-view" scroll-y="true">
						<tong-ji></tong-ji>
						<view style="width: 100%;height: 100rpx;opacity:0;">底部占位盒子</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import io from "@/util/weapp.socket.io.js"
	import tongJi from '../../commpons/tong_ji.vue'
	import paiHang from '../../commpons/pai_hang.vue'
	import qiandaoRenwu from '../../commpons/qiandao_renwu.vue';
	import uniPopup from "@/lib/components/uni-popup/uni-popup.vue";
	export default {
		data() {
			return {
				title: 'Hello',
				currentSwiper: 0,
				topBars: ['签到任务', '排行', '统计'],
				viewHeight: 0,
				signData:{},
				socketID: ""
			}
		},
		onLoad() {
			

			this.changeNavigationBarTitle(0);
			//获取屏幕高度
			let that = this;
			uni.getSystemInfo({
				success(res) {
					/**
					 * screenHeight	屏幕高度  //包括头部导航
					 * 注意：自定义导航 会有很大高度问题
					 * 
					 * windowHeight	可使用窗口高度  //不包括
					 */
					that.viewHeight = res.windowHeight;
				}
			})
		},
		methods: {
			swiperChange(e) { //切换 swiper 触发
				this.currentSwiper = e.detail.current;
				this.changeNavigationBarTitle(this.currentSwiper);
			},
			clickItem(index) { //手动切换
				// console.log(index);
				this.currentSwiper = index;
				this.changeNavigationBarTitle(this.currentSwiper);
			},
			clickLeft() {
				uni.switchTab({
					url: "../tabBar/index/index"
				})
			},
			changeNavigationBarTitle(index) { //设置页面标题
				switch (index) {
					case 0:
						uni.setNavigationBarTitle({
							title: "签到任务"
						})
						break;
					case 1:
						uni.setNavigationBarTitle({
							title: "签到排行"
						})
						break;
					case 2:
						uni.setNavigationBarTitle({
							title: "签到统计"
						})
						break;
					default:
						break;
				}
			}
		},
		components: {
			uniPopup,
			qiandaoRenwu,
			paiHang,
			tongJi
		}
	}
</script>

<style lang="scss">
	.zt-topBar {
		position: fixed;
		display: flex;
		bottom: 0;
		left: 0;
		flex-direction: row;
		justify-content: space-around;
		background: #fafafa;
		height: 100rpx;
		line-height: 100rpx;
		width: 100%;
		z-index: 2;
		padding-bottom: 2rpx;
		font-size: 14px;
	}

	.zt-bar-item {
		flex-grow: 1;
		// flex: 1;
		flex-shrink: 1;
		flex-basis: auto;
		text-align: center;
	}

	.zt-active {
		color: #007AFF;
		border-bottom: 2px solid #007AFF;
	}

	.zt-swiper {
		z-index: 1;

	}

	.zt-scroll-view {
		overflow: hidden auto;
		background: #FFFFFF;
		height: 100%;
		width: 100%;
	}
</style>
